<template>
	<view class="box">

		<!-- 头部 -->
		<view class="tou">
			<view class="tou_nei">
				<view class="toux">
					头像
				</view>
				<view class="xingm">
					<text style="font-size: 45rpx;margin-bottom: 10rpx;">宋某某</text>
					<view style="font-size: 20rpx;margin-top: 10rpx;display: flex;justify-content: space-between;">高级认证
						<view
							style="padding: 10rpx; font-size: 25rpx;border: 1px solid #fff;border-radius: 15px;margin-right: 20rpx;">
							切换长辈模式</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 内容 -->
		<view class="neir">
			<view
				style="padding: 10rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<image style="width: 70rpx;height: 70rpx;" src="../../static/06a2fa52394e71471d7c4d3a88eed2a.png"
					mode=""></image>
				<text style="font-size: 25rpx;margin-top: 10rpx;">我的办件</text>
			</view>
			<view
				style="padding: 10rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<image style="width: 70rpx;height: 70rpx;" src="/static/3339f03a50aac1c1990506687e9a502.png" mode="">
				</image>
				<text style="font-size: 25rpx;margin-top: 10rpx;">权益积分</text>
			</view>
			<view
				style="padding: 10rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<image style="width: 70rpx;height: 70rpx;" src="/static/3500dbd6bcab01906f5e06b95c441f0.png" mode="">
				</image>
				<text style="font-size: 25rpx;margin-top: 10rpx;">优惠券</text>
			</view>
			<view
				style="padding: 10rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<image style="width: 70rpx;height: 70rpx;" src="/static/06f472edad8517948cf14e95e0bad44.png" mode="">
				</image>
				<text style="font-size: 25rpx;margin-top: 10rpx;">我的钱包</text>
			</view>
		</view>

		<!-- 个人中心 -->
		<view class="newest">
			<view class="newest1">
				个人中心
			</view>
			<view class="newest2">
				<scroll-view scroll-x="true" class="sdandwk">
					<view class="dadada">
						<view class="newest2_neir" style="background-color: #ebfbf6;">
							<text style="width: 90%;font-weight: 600;font-size: 28rpx;color:#40c99c;">公积金</text>
							<text style="width: 90%;margin-top: 10rpx;color: #88dfcb;">缴存明细 ></text>
						</view>
						<view class="newest2_neir" style="background-color: #ffeed2;">
							<text style="width: 90%;font-weight: 600;font-size: 28rpx;color:#f59006;">商鼎分</text>
							<text style="width: 90%;margin-top: 10rpx;color: #f8d580;">城市信用 ></text>
						</view>
						<view class="newest2_neir" style="background-color: #fdeeeb;">
							<text style="width: 90%;font-weight: 600;font-size: 28rpx;color:#e19376;">医保</text>
							<text style="width: 90%;margin-top: 10rpx;color: #e4af8f;">消费记录></text>
						</view>
						<view class="newest2_neir" style="background-color: #edf3ff;">
							<text style="width: 90%;font-weight: 600;font-size: 28rpx;color:#5385d3;">新生儿一件事</text>
							<text style="width: 90%;margin-top: 10rpx;color: #6ea7dc;"> 出生登记 医保社保</text>
						</view>
						<view class="newest2_neir" style="background-color: #e7e9fe;">
							<text style="width: 90%;font-weight: 600;font-size: 28rpx;color:#8784d6;">燃气安全装置加装</text>
							<text style="width: 90%;margin-top: 10rpx;color: #c7c3f8;">加装缴费 安全用气</text>
						</view>
					</view>
				</scroll-view>

			</view>
		</view>


		<!-- 我的服务 -->
		<view class="woefu">
			<view style="margin: 10rpx;font-weight: 600;">我的服务</view>
			<view style="width: 100%; height: 100%; display: flex; flex-wrap:wrap">
				<view class="function_view">
					<text class="iconfont" style="font-size: 60rpx;margin-bottom: 10rpx;color: #00d28b;">&#xe6df;</text>
					<text style="font-size: 25rpx;">防疫防空</text>
					<!-- <text style="font-size: 25rpx;">服务</text> -->
				</view>
				<view class="function_view">
					<text class="iconfont" style="font-size: 60rpx;margin-bottom: 10rpx;color: #2689ff;">&#xe785;</text>
					<text style="font-size: 25rpx;">核算检测</text>
					<!-- <text style="font-size: 25rpx;">一键通过</text> -->
				</view>
				<view class="function_view">
					<text class="iconfont" style="font-size: 60rpx;margin-bottom: 10rpx;color: #00d28b;">&#xe61e;</text>
					<text style="font-size: 25rpx;">郑好码</text>
					<!-- <text style="font-size: 25rpx;">一键通过</text> -->
				</view>
				<view class="function_view">
					<text class="iconfont" style="font-size: 60rpx;margin-bottom: 10rpx;color: #2689ff;">&#xe611;</text>
					<text style="font-size: 25rpx;">返郑饭豫</text>
					<!-- <text style="font-size: 25rpx;">人员登记</text> -->
				</view>
				<view class="function_view">
					<text class="iconfont" style="font-size: 60rpx;margin-bottom: 10rpx;color: #5639e5;">&#xe767;</text>
					<text style="font-size: 25rpx;">郑好融</text>
					<!-- <text style="font-size: 25rpx;">一键通过</text> -->
				</view>
				<view class="function_view">
					<text class="iconfont" style="font-size: 60rpx;margin-bottom: 10rpx;color: #f96159;">&#xe600;</text>
					<text style="font-size: 25rpx;">郑好拍</text>
					<!-- <text style="font-size: 25rpx;">一键通过</text> -->
				</view>
				<view class="function_view">
					<text class="iconfont" style="font-size: 60rpx;margin-bottom: 10rpx;color: #00d28b;">&#xe61b;</text>
					<text style="font-size: 25rpx;">社保</text>
					<!-- <text style="font-size: 25rpx;">一键通过</text> -->
				</view>
				<view class="function_view">
					<text class="iconfont" style="font-size: 60rpx;margin-bottom: 10rpx;color: #fe635c;">&#xe69c;</text>
					<text style="font-size: 25rpx;">郑惠企·亲</text>
					<!-- <text style="font-size: 25rpx;">清在线</text> -->
				</view>
				<view class="function_view">
					<text class="iconfont" style="font-size: 60rpx;margin-bottom: 10rpx;color: #2689ff;">&#xe603;</text>
					<text style="font-size: 25rpx;">公基金</text>
					<!-- <text style="font-size: 25rpx;">一键通过</text> -->
				</view>
				<view class="function_view">
					<text class="iconfont" style="font-size: 60rpx;margin-bottom: 10rpx;color: #fb635d;">&#xe7c6;</text>
					<text style="font-size: 25rpx;">契税专区</text>
					<!-- <text style="font-size: 25rpx;">一键通过</text> -->
				</view>
			</view>
		</view>

		<!-- 法人服务 -->
		<view class="woefu">
			<view style="margin: 10rpx;font-weight: 600;">法人服务</view>
			<view style="width: 100%; height: 100%; display: flex; flex-wrap:wrap">
				<view class="function_view">
					<text class="iconfont" style="font-size: 60rpx;margin-bottom: 10rpx;color: #00d28b;">&#xe6df;</text>
					<text style="font-size: 25rpx;">防疫防空</text>
					<!-- <text style="font-size: 25rpx;">服务</text> -->
				</view>
				<view class="function_view">
					<text class="iconfont" style="font-size: 60rpx;margin-bottom: 10rpx;color: #2689ff;">&#xe785;</text>
					<text style="font-size: 25rpx;">核算检测</text>
					<!-- <text style="font-size: 25rpx;">一键通过</text> -->
				</view>
				<view class="function_view">
					<text class="iconfont" style="font-size: 60rpx;margin-bottom: 10rpx;color: #00d28b;">&#xe61e;</text>
					<text style="font-size: 25rpx;">郑好码</text>
					<!-- <text style="font-size: 25rpx;">一键通过</text> -->
				</view>
				<view class="function_view">
					<text class="iconfont" style="font-size: 60rpx;margin-bottom: 10rpx;color: #2689ff;">&#xe611;</text>
					<text style="font-size: 25rpx;">返郑饭豫</text>
					<!-- <text style="font-size: 25rpx;">人员登记</text> -->
				</view>
				<view class="function_view">
					<text class="iconfont" style="font-size: 60rpx;margin-bottom: 10rpx;color: #5639e5;">&#xe767;</text>
					<text style="font-size: 25rpx;">郑好融</text>
					<!-- <text style="font-size: 25rpx;">一键通过</text> -->
				</view>
	
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	/* 我的服务 */
	.function_view {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		margin-top: 15rpx;
		width: 20%;
		height: 40%;
		/* background-color: aquamarine; */
	}

	.woefu {
		width: 650rpx;
		padding: 20rpx;
		margin: 10rpx;
		background-color: #fff;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
	}

	/* 个人中心 */
	.newest2_neir {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
		margin: 20rpx;
		width: 500rpx;
		height: 150rpx;
		border-radius: 10px;
	}

	.sdandwk {
		/* width: 100%; */
		height: 100%;
	}

	.dadada {
		width: 1500rpx;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.newest {
		margin-top: 30rpx;
		padding: 25rpx;
		width: 650rpx;
		background-color: #fff;
		border: 1rpx solid #fff;
		border-radius: 10px;
		margin-bottom: 20rpx;
	}

	.newest1 {
		/* width: 750rpx; */
		/* width: 100%; */
		font-weight: 700;
	}

	.newest2 {
		/* margin-top: 20rpx; */
		width: 100%;
	}

	.neir {
		width: 90%;
		height: 200rpx;
		background-color: #fff;
		border-radius: 10px;
		margin-top: -80rpx;
		padding: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.box {
		width: 750rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: aliceblue;
		overflow-x: hidden;
	}

	.tou {
		width: 100%;
		height: 400rpx;
		background-color: #409efe;
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tou_nei {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.toux {
		width: 20%;
		height: 150rpx;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #000;
		margin-left: 20rpx;
	}

	.xingm {
		width: 70%;
		display: flex;
		/* align-items: center; */
		justify-content: center;
		flex-direction: column;
	}
</style>
